<template>
	<view>
		<!-- 图片区域 -->
		<scroll-view scroll-x="true" class="upimage_add" enable-flex show-scrollbar="false">
			<view class="upImgSl" v-for="(imgItem, idx) in imgRegion" :key="idx">
				<image mode="aspectFill" :src="imgItem"></image>
				<image @click="removeImg(idx)" class="errorImg" src="../../static/images/error.png">
				</image>
			</view>
			<view class="upimage_add_button" @click="upImg">+</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		name: "uploadImg",
		props: {
			objUser: String
		},
		data() {
			return {
				imgpath: [],
				// 图片展示
				imgRegion: [],
			};
		},
		methods: {
		
			// 上传图片
			upImg() {
				console.log(this.objUser)
				var app = this
				if (this.imgRegion.length >= 9) {
					uni.showToast({
						title: "最多上传九张图片",
						icon: "none"
					})
					return
				}
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //从相册选择
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						console.log("tempFilePaths: ")
						console.log(tempFilePaths)
						// 限制上传数量
						if (app.imgRegion.length + res.tempFilePaths.length > 9) {
							// console.log()
							uni.showToast({
								title: "最多上传九张图片",
								icon: "none"
							})
							return
						}

						res.tempFilePaths.forEach((item) => {
							app.imgRegion.push(item)
							app.$emit('imgRegion', this.imgRegion);
						})
						for (let a = 0; a < tempFilePaths.length; a++) {
							// 在此处上传图片
							uni.uploadFile({
								url: 'https://www.ccl225.cn/api/ym_server/article-image', //接口地址
								filePath: tempFilePaths[a],
								name: 'file',
								header: {
									"token": this.objUser
								},
								formData: {
									"file": 'tempFilePaths'
								},
								success: (uploadFileRes) => {
									app.imgpath.push(JSON.parse(uploadFileRes.data).data.data[0])
									app.$emit('imgpath', this.imgpath);
								}
							})
							// 上传end
						}

					}
				});

			},
			// 删除图片
			removeImg(idx) {
				console.log(idx)
				this.imgRegion.splice(idx, 1)
				this.imgpath.splice(idx, 1)
				this.$emit('imgpath', this.imgpath)
				this.$emit('imgRegion', this.imgRegion)
			},
		}
	}
</script>

<style lang="scss">
	.upimage_add {
		min-width: 100%;
		height: 250upx;
		white-space: nowrap;
		overflow: hidden;
		display: flex;

		.upimage_add_button {
			min-width: 210upx;
			height: 210upx;
			border-radius: 30upx;
			margin: 20rpx 20rpx 20rpx 20rpx;
			line-height: 210upx;
			text-align: center;
			font-size: 100upx;
			color: gray;
			background-color: #F6F6F6;

		}

		.upImgSl {
			width: 210upx;
			height: 210upx;
			min-width: 210upx;
			border-radius: 30upx;
			margin: 20rpx 20rpx 20rpx 20rpx;
			position: relative;


			image {
				width: 100%;
				height: 100%;
				border-radius: 30upx;
			}

			// 删除按钮
			.errorImg {
				width: 30upx;
				height: 30upx;
				position: absolute;
				top: 12upx;
				right: 12upx;
			}
		}
	}
</style>
